<template>
  <div>
    <div class="login-parsel">
      <p>
        <span class="circle" @click="router.go(-1)"
          ><el-icon><Back /></el-icon
        ></span>
        <span style="margin-left: 4.5rem; font-size: 1.1rem"
          >填写您的个人资料</span
        >
      </p>
      <el-upload
        class="avatar-uploader"
        action="http://127.0.0.1:3000/zjm/upload"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        <img src="/pen.png" alt="" class="penimg" />
      </el-upload>
      <p>
        昵称<br />
        <el-input
          style="width: 21.8rem; height: 2.7rem; margin-top: 0.5rem"
          placeholder="你的名字"
          v-model="form.uname"
        />
      </p>
      <p>
        电子邮件<br />
        <el-input
          style="width: 21.8rem; height: 2.7rem; margin-top: 0.5rem"
          placeholder="您的电子邮件地"
          v-model="form.email"
        />
      </p>
      <p style="position: relative">
        电话号码<br />
        <input type="text" class="phoneinp1" placeholder="+86" /><input
          type="text"
          class="phoneinp2"
          placeholder="输入电话号码"
          v-model="form.phone"
        />
        <img src="/china.png" alt="" class="chinaimg" />
      </p>
      <p>
        出生日期<br />
        <el-input
          style="width: 21.8rem; height: 2.7rem; margin-top: 0.5rem"
          placeholder="你的出生日"
          :suffix-icon="Calendar"
          v-model="form.birthday"
        />
      </p>
      <p>
        性别<br />
        <el-select
          v-model="form.sex"
          placeholder="Select"
          size="large"
          style="width: 21.8rem; height: 2.7rem; margin-top: 0.5rem"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </p>
      <p style="text-align: center">
        <!-- <button class="confirmbtn">确认</button> -->
        <button class="confirmbtn-copy" @click="submit">确认</button>
      </p>
    </div>
  </div>
</template>

<script lang="ts" setup>
import Header from "../My/Header.vue";
import { Calendar, Search } from "@element-plus/icons-vue";
import { useRouter, useRoute } from "vue-router";
import axios from "axios";

const router = useRouter();
const route = useRoute();

import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import { Plus } from "@element-plus/icons-vue";

import type { UploadProps } from "element-plus";

const imageUrl = ref("");

const form = reactive({
  uname: route.query.name,
  email: route.query.email,
  phone: route.query.phone,
  birthday: "",
  sex: "",
  imgsrc: "",
});

const options = reactive([
  {
    value: 0,
    label: "女",
  },
  {
    value: 1,
    label: "男",
  },
]);

const handleAvatarSuccess: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw!);
  form.imgsrc = "http://127.0.0.1:3000/" + response.path;
};

const submit = async () => {
  axios.post("http://127.0.0.1:3000/zjm/adduser", form).then((res) => {
    if (res.data.code == 200) {
      ElMessage({
        message: "填写资料成功",
        type: "success",
      });
      router.push("/login");
    } else {
      alert(res.data.msg);
    }
  });
};
</script>

<style lang="scss" scoped>
.login-parsel {
  width: 90vw;
  height: auto;
  margin: 0 auto;
  padding-top: 3rem;
  padding-left: 1rem;
  box-sizing: border-box;
  p {
    padding-top: 0.5rem;
    box-sizing: border-box;
  }
}
.circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #d0d0d0;
  padding: 0.7rem;
  box-sizing: border-box;
}
.avatar-uploader {
  width: 7rem;
  height: 7rem;
  margin: 0 auto;
  border: 1px dashed #ffb900;
  border-radius: 50rem;
  margin-top: 2rem;
  text-align: center;
  line-height: 7rem;
  position: relative;
}
.avatar {
  width: 7rem;
  height: 7rem;
  border-radius: 50rem;
  position: absolute;
  left: 0;
  top: 0;
}

.penimg {
  width: 1.5rem;
  height: 1.5rem;
  position: absolute;
  right: 0rem;
  bottom: 0rem;
  border-radius: 0.5rem;
}

.phoneinp1 {
  width: 23vw;
  padding: 0.7rem;
  box-sizing: border-box;
  margin-top: 0.5rem;
  border: 1px solid #d0d0d0;
  border-radius: 0.3rem 0rem 0rem 0.3rem;
  border-right: none;
  text-align: right;
}

.chinaimg {
  width: 2rem;
  height: 1.5rem;
  position: absolute;
  left: 0.5rem;
  top: 2.9rem;
}
.phoneinp2 {
  width: 61vw;
  padding: 0.7rem;
  box-sizing: border-box;
  margin-top: 0.5rem;
  border: 1px solid #d0d0d0;
  border-radius: 0.3rem;
  border-left: none;
}
.confirmbtn {
  width: 85vw;
  height: 3rem;
  margin: 0 auto;
  margin-top: 1rem;
  border: none;
  border-radius: 0.5rem;
  background-color: #ffe9b0;
  color: white;
  font-size: 1.2rem;
}
.confirmbtn-copy {
  width: 85vw;
  height: 3rem;
  margin: 0 auto;
  margin-top: 1rem;
  border: none;
  border-radius: 0.5rem;
  background-color: #ffb900;
  color: white;
  font-size: 1.2rem;
}
</style>